<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="../css/reset.css"> -->
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .adver {
            width: 300px;
            /* height: 400px; */
            background-color: grey;
            position: fixed;
            right: 5px;
            bottom: 5px;
        }

        .adver-top {
            font-size: 14px;
            line-height: 30px;
        }

        .adver-top .adver-title {
            text-indent: 10px;
        }

        .adver-top .adver-close {
            padding: 0 5px;
            position: absolute;
            right: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <!-- 在页面写死 => 如果有用户直接删除该html结构 => 操作的元素就不存在了 => 小广告就无法出现 -->
    <!-- <div class="adver">
        <div class="adver-top">
            <div class="adver-title">距离广告关闭还有10秒</div>
            <div class="adver-close">X</div>
        </div>
        <div class="adver-detail">
            <img src="../images/bzsc-dgbhz-300-250-7-5.gif" alt="">
        </div>
    </div> -->
</body>
<script>
    // 动态生成小广告(默认隐藏)

    // 1. 延迟5s生成小广告
    // 2. 倒计时10秒后关闭小广告
    // 3. 重复 1 - 2 两步
    // 4. 点击 x  关闭小广告
    // 5. 重复 1 - 2 两步

    // 事件捕获/事件冒泡/事件流 => 事件的默认传播机制  => 只要父子元素绑定了相同类型的事件, 子元素的事件触发,父元素的事件一定会触发

    // click:  adver-close ->  adver-top -> adver 

    // 页面加载时 启动小广告

    /* 
    
    <div class="adver">
        <div class="adver-top">
            <div class="adver-title">距离广告关闭还有10秒</div>
            <div class="adver-close">X</div>
        </div>
        <div class="adver-detail">
            <img src="../images/bzsc-dgbhz-300-250-7-5.gif" alt="">
        </div>
    </div>
    */



    adverLoop();

    function adverLoop() {
        var dTimer = setTimeout(function () {
            var adver = document.createElement("div");
            adver.className = "adver";
            adver.onclick = function(){
                // 点击跳转百度
                location.href = "https://www.baidu.com"
            }

            var adverTop = document.createElement("div");
            adverTop.className = "adver-top";
            adver.appendChild(adverTop);

            var adverTitle = document.createElement("div");
            adverTitle.className = "adver-title";
            adverTitle.textContent = "距离广告关闭还有10秒";
            adverTop.appendChild(adverTitle);

            var adverClose = document.createElement("div");
            adverClose.className = "adver-close";
            adverClose.textContent = "X";
            adverTop.appendChild(adverClose);
            adverClose.onclick = function (e) {
                var e = e || window.event;
                console.log(e);
                clearTimeout(dTimer);
                clearInterval(iTimer);
                adver.remove();
                adverLoop();

                // 想组件adver-close的点击事件 继续向后传播 (想在哪里停,就在哪里阻止)
                // e.stopPropagation();   // 事件对象的方法 (常规浏览器)
                // e.cancelBubble = true; // ie低版本/常规浏览器 (通过cancelBubble 来控制)

                // 兼容写法
                if(e.stopPropagation){ //取值 判断方法是否存在 (存在:返回函数  不存在(ie低版本) => undefined )
                    e.stopPropagation();
                }else{
                    e.cancelBubble = true;
                }



            }

            var adverDetail = document.createElement("div");
            adverDetail.className = "adver-detail";
            adver.appendChild(adverDetail);

            var img = document.createElement("img");
            img.src = "../images/bzsc-dgbhz-300-250-7-5.gif";
            adverDetail.appendChild(img);

            document.body.appendChild(adver);

            var count = 10;
            var iTimer = setInterval(function () {
                count--;
                adverTitle.textContent = `距离广告关闭还有${count}秒`;
                if (count <= 0) { // 倒计时结束
                    adver.remove()
                    clearInterval(iTimer);

                    // 等待倒计时结束 -> 重新开启下一次
                    adverLoop();
                }
            }, 1000)

        }, 5000);
    }



</script>

</html>